<script setup>
import { ref } from "vue";
const imgs = ref(["https://oss.dingdongdr.com/static/enter/doctor2.png"]);
</script>
<template>
	<div class="m-[10px] overflow-hidden rounded-[10px] bg-[#ffffff]">
		<van-cell v-model="value" title="项目名称" value="" />
		<van-cell v-model="value" title="就诊人" is-link>
			<template #value>
				<div>请选择</div>
				<div>
					<div>郭军&nbsp;15660971234</div>
					<div>浙江省杭州市上城区秋涛北路328号佰富时代中心3幢</div>
				</div>
			</template>
		</van-cell>
		<van-cell v-model="value" title="上门医护" is-link value="请选择" />
		<van-cell v-model="value" title="服务时间" is-link value="请选择" />
		<van-cell v-model="value" title="活动能力" is-link value="请选择" />
	</div>
	<div class="mx-auto mt-[10px] w-[350px] overflow-hidden rounded-[10px] bg-[#ffffff]">
		<van-cell center title="图片上传" label="医生会通过就医证明和患处图片判断是否上门医护" />
		<div class="mx-[10px] mb-[10px] rounded-[6px] bg-[#f7f9fa] p-[10px]">
			<UploadImg :list="imgs" />
		</div>
	</div>
	<div class="custom mx-auto mt-[10px] w-[350px] overflow-hidden rounded-[10px] bg-[#ffffff]">
		<van-cell center title="病情描述" label="信息描述多于10字，格式：病症+现有治疗+护理需求" />
		<van-field
			v-model="message"
			rows="4"
			autosize
			:border="false"
			type="textarea"
			placeholder="举例：之前手术开刀，刀口还未拆线，现已在家10日，需要医护上门为我拆线"
		/>
	</div>
	<div class="p-[36px]"></div>
	<!-- 按钮 -->
	<div class="fixed bottom-0 w-[375px] bg-[#ffffff] px-[20px] py-[10px]">
		<div class="rounded-[20px] bg-gradient-to-r from-[#4d90f5] to-[#357efe] py-[10px] text-center text-[#ffffff]">
			立即预约
		</div>
	</div>
</template>

<style lang="scss" scoped>
.custom :deep(.van-cell) {
	padding: 10px;
	.van-cell__value {
		flex: 3;
	}
	.van-field__control {
		background: #f7f9fa;
		border-radius: 6px;
		padding: 2px 8px;
	}
}
</style>
